<template>
  <div :id="'foldEcharts' + id" style="height:450px;"></div>
</template>
<script>
    import * as echarts from "echarts";

    export default {
        props: {
            data: {
                type: Array,
                default: () => {
                    return []
                }
            },
            id: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                foldEcharts: null
            }
        },
        created() {
            let d = [], days = [];
            //库存
            if (this.id == 1) {
                this.data.map(i => {
                    days.push(i.singDate);
                    d.push(i.abnormalBigDecimal);
                })
            }
            if (this.id == 3) {
                this.data.map(i => {
                    days.push(i.singDate);
                    d.push(i.bigDecimal);
                })
            }
            if(this.id == 2) {
                this.data.map(i => {
                    days.push(i.singDate);
                    d.push(i.bigDecimal);
                })
            }

            this.$nextTick(() => {
                this.foldEcharts = echarts.init(document.getElementById('foldEcharts' + this.id), "macarons");
                this.foldEcharts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true,
                            symbold: 'arrow',
                        },
                        axisTick: {
                            lineStyle: {
                                color: 'red',
                                width: 10
                            }
                        }
                    },
                    series: [{
                        data: d,
                        type: 'line',
                        smooth: true
                    }]
                });

                let that = this;
                window.addEventListener('resize', () => {
                    that.foldEcharts.resize()
                });
            })
        }
    }
</script>
